﻿@{
    ViewData["Title"] = "登录";
    Layout = null; // 登录页独立，不使用全局布局
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - 星卫达进销存管理系统</title>
    <!-- 引用 Bootstrap 样式（确保路径与安装位置一致） -->
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <!-- 商务风+居中布局样式 -->
    <style>
        html, body {
            height: 100%; /* 占满屏幕高度 */
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f0f5f9; /* 低饱和蓝灰，商务沉稳 */
            font-family: "Microsoft YaHei", sans-serif; /* 适配中文商务场景 */
            display: flex; /* 启用弹性布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }

        .card {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 浅阴影，不浮夸 */
            border-radius: 0.25rem; /* 小圆角，更规整 */
            border: none;
            width: 100%;
            max-width: 420px; /* 限制卡片最大宽度，避免大屏过宽 */
        }

        .card-header {
            background-color: #0d47a1 !important; /* 深商务蓝，正式感拉满 */
            border-bottom: none;
            border-radius: 0.25rem 0.25rem 0 0 !important;
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            text-align: center;
            margin-bottom: 0;
        }

        .form-label {
            font-weight: 500;
            color: #2c3e50; /* 深灰色标签，更清晰稳重 */
        }

        .form-control {
            border: 1px solid #ccd5e0;
            border-radius: 0.25rem;
            padding: 0.6rem 0.75rem;
        }

            .form-control:focus {
                border-color: #0d47a1;
                box-shadow: 0 0 0 0.2rem rgba(13, 71, 161, 0.25); /* 聚焦时商务蓝高亮 */
                outline: none;
            }

        #captchaImg {
            border: 1px solid #ccd5e0;
            border-radius: 0.25rem;
            cursor: pointer;
        }

            #captchaImg:hover {
                border-color: #0d47a1; /* hover时同步商务蓝 */
            }

        .btn-primary {
            width: 100%;
            background-color: #0d47a1;
            border-color: #0d47a1;
            padding: 0.6rem 0;
            font-weight: 500;
            border-radius: 0.25rem;
        }

            .btn-primary:hover, .btn-primary:focus {
                background-color: #0a3d8c; /* 加深一点，hover不突兀 */
                border-color: #0a3d8c;
                box-shadow: none;
            }

        .alert-danger {
            background-color: #fef2f2;
            border-color: #fecaca;
            color: #b91c1c;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 登录卡片容器（直接被body的flex布局居中） -->
    <div class="card">
        <div class="card-header text-white">
            <h3 class="card-title">星卫达进销存管理系统</h3>
        </div>
        <div class="card-body p-4">
            <!-- 调整内边距，不拥挤 -->
            <!-- 错误提示 -->
            @if (ViewBag.ErrorMessage != null)
            {
                <div class="alert alert-danger" role="alert">
                    @ViewBag.ErrorMessage
                </div>
            }

            <!-- 登录表单 -->
            <form method="post" asp-controller="Login" asp-action="Login"
                  class="needs-validation" novalidate>
                @Html.AntiForgeryToken()

                <!-- 用户名 -->
                <div class="mb-4">
                    <!-- 调整间距，更规整 -->
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" required />
                    <div class="invalid-feedback">请输入用户名</div>
                </div>

                <!-- 密码 -->
                <div class="mb-4">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" name="password" required />
                    <div class="invalid-feedback">请输入密码</div>
                </div>

                <!-- 验证码 -->
                <div class="mb-4">
                    <label for="captcha" class="form-label">验证码</label>
                    <div class="d-flex align-items-center">
                        <input type="text" class="form-control me-2" id="captcha" name="captcha" required
                               placeholder="请输入验证码" />
                        <img id="captchaImg" src="@Url.Action("CaptchaImage", "Login")"
                             alt="验证码" style="height: 38px; width: 100px;" />
                    </div>
                    <div class="invalid-feedback">请输入验证码</div>
                </div>

                <!-- 登录按钮 -->
                <button type="submit" class="btn btn-primary">登录</button>
            </form>
        </div>
    </div>

    <!-- JavaScript：验证码刷新 + 前端表单验证 -->
    <script>
        // 1. 验证码刷新逻辑
        document.getElementById("captchaImg").addEventListener("click", function() {
            this.src = "@Url.Action("CaptchaImage", "Login")?t=" + new Date().getTime();
        });

        // 2. 前端表单验证（Bootstrap 原生验证）
        (function() {
            'use strict';
            var forms = document.querySelectorAll('.needs-validation');
            Array.from(forms).forEach(form => {
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        })();
    </script>
</body>
</html>